<template>
  <div class="search-history">
    <!-- 布局 -->
    <van-cell title="搜索历史">
      <div v-if="isDeleteShow">
        <!-- <div v-show="isDeleteShow"> -->

        <span @click="$emit('clear-search-histories')">全部删除 </span>
        &nbsp;&nbsp;&nbsp;
        <span @click="isDeleteShow = false">完成</span>
      </div>
      <!-- <van-icon name="delete"v-show="!isDeleteShow" @click="isDeleteShow = true"></van-icon> -->

      <van-icon name="delete" v-else @click="isDeleteShow = true"></van-icon>
    </van-cell>
    <van-cell
      :title="item"
      v-for="(item, index) in searchHistorts"
      :key="index"
      @click="onSearchListClick(item, index)"
    >
      <van-icon name="close" v-if="isDeleteShow"></van-icon>
    </van-cell>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    // prop数据如果是普通数据（数字字符串布尔绝对不能修改
    // 即使修改也不回创父组件
    // 如果是引用类型数据（数组 对象 可以修改例如[].push(xxx) 不能重新赋值，xxx=[]
    searchHistorts: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      isDeleteShow: false, //控制删除显示状态
    };
  },
  computed: {},
  watch: {
    
  },
  created() {},
  mounted() {},
  methods: {
    onSearchListClick(item, index) {
      if (this.isDeleteShow) {
        // 删除历史状态  删除历史数据  通过索引删除  每次删除1
        this.searchHistorts.splice(index, 1);
      } else {
        // 进入搜索
        this.$emit("search", item);
      }
    },
  },
};
</script>

<style scoped lang="less">
.van-cell__value {
  span {
    padding-right: 3px;
  }
}
</style>